<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内容详情</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div style="text-align: center;font-weight:bold;">{{title}}</div>
        <div v-html="content" style="margin-top:30px;"></div>
    </div>
</body>
<script src="https://lk.chinawifipot.com/znhp/public/static/js/vue.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    }
    new Vue({
        el: "#app",
        data() {
            return {
                title: "",
                content: ""
            }
        },
        created() {
            let that = this;
            $.ajax({
                url: "https://lk.chinawifipot.com/znhp/public/plugin/encyclopedias/api_index/encyInfo",
                data: {
                    id: getUrlParam('id'),
                },
                dataType: "json",
                type: "post",
                success: function (res) {
                    if (res.code == 200) {
                        that.title = res.data.title;
                        that.content = that.formatRichText(res.data.content);
                    } else {
                        that.$message({
                            message: res.message,
                            type: 'error',
                            duration: 1500,
                        });
                    }
                }
            });
        },
        methods:{
            formatRichText(html) {
                let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
                    match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
                    match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
                    match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
                    return match;
                });
                newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
                    match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
                    return match;
                });
                newContent = newContent.replace(/<br[^>]*\/>/gi, '');
                newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;"');
                return newContent;
            }
        }
    })
</script>

</html>